<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <title>动态生成SVG圆弧测试</title>
    <style>
        
    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100" width="100" id="svg-01">
        <circle id='circle' cx="50%" cy="50%" fill="none"/>
         <path id='path' fill="none" height="100%" width="100%"></path>
        <text x="50%" y="50%" fill="red" style='dominant-baseline:middle;text-anchor:middle;'>80%</text> 
    </svg>
</body>
<script>
    /**
     * @auth wpz
     * @time 2019/05/27 16:55
     * params[startX, startY, R, theta, width, color, DotBetween]
     * @param {number} startX, startY 起始坐标
     * @param {number} R 半径
     * @param {number} theta 角度
     * @param {number} width 边框宽度
     * @param {number} color 边框颜色
     * @param {number} DotBetween 虚线间距 0 为无间距
     */
    function createSVGPath(startX, startY, R, theta, width, color, DotBetween) {
        var path = document.getElementById('path')   
        var circle = document.getElementById('circle')
        var realR = R - width;
        var dArr = ["M" + startX, startY + width, "A" + realR, realR, 0, (theta >= 180 ? 1 : 0), 0];
        var cx = startX, cy = startY + R;
        circle.setAttribute('r', rect/2 - width/2);  
        path.setAttribute('transform',`translate(${((1-R*2/rect)/2)*rect}, ${((1-R*2/rect)/2)*rect})`);  
        var theta2 = theta%360;
        // 避免360度与0度一样的情况
        theta = theta > 0 && theta2 == 0 ? 359.9 : theta2;

        var alpha = (theta + 90)/180 * Math.PI;
        var dx = realR * Math.cos(alpha);
        var dy = realR * Math.sin(alpha);
        var x = cx + dx, y = cy - dy;

        dArr.push(x.toFixed(2));
        dArr.push(y.toFixed(2));
        var d = dArr.join(" ");
        
        path.setAttribute('d', d);
        path.setAttribute('stroke', color);
        path.setAttribute('stroke-width', width);
        path.setAttribute('stroke-linecap',"round");
        path.setAttribute('stroke-dasharray',`0,${DotBetween}`);
        
        circle.setAttribute('stroke', color);
        circle.setAttribute('stroke-width', width);
        circle.setAttribute('stroke-linecap',"round");
        circle.setAttribute('stroke-dasharray',`0,${DotBetween}`);

        return path;
    }

    var svg = document.getElementById('svg-01');
    
    var rect = svg.getBoundingClientRect().width;
    var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'cyan', 'purple', 'black'];
    var path = createSVGPath((rect/2)*0.9, 0, (rect/2)*0.9, 360*0.8, 5, 'blue', 10);
    var inner = svg.appendChild(path);
</script>
</html>